<template>
  <div>
   <h3>请确认您的认证信息</h3>
   <!-- 信息展示 -->
    <el-descriptions :column="1" border>
     <el-descriptions-item label="真实姓名">{{ form.realName || '未填写' }} </el-descriptions-item>
     <el-descriptions-item label="电话号码">{{ form.phone || '未填写' }} </el-descriptions-item>
     <el-descriptions-item label="身份证号">{{ form.idCard || '未填写' }} </el-descriptions-item>
     <el-descriptions-item label="详细地址">{{ form.address || '未填写' }} </el-descriptions-item>
     <el-descriptions-item label="农户类型">{{ displayFarmerType }} </el-descriptions-item>
     <el-descriptions-item label="主要农产品">{{ displayMainProducts.join("，") }} </el-descriptions-item>
     <el-descriptions-item label="种植/养殖规模">{{ form.scale || '未填写' }} </el-descriptions-item>
    </el-descriptions>
    <!-- 上传资料展示 -->
     <el-form disabled>
       <h3>上传材料预览</h3>
       <div class="upload-review">
         <div>身份证正面<image-upload v-model="form.idCardFront"/></div>
         <div>身份证反面<image-upload v-model="form.idCardBack"/></div>
         <div>土地承包合同<image-upload v-model="form.landProof"/></div>
         <div>农产品照片<image-upload v-model="form.productPhotos"/></div>
         <div v-if="form.otherProof && form.otherProof.length > 0">其他证明材料<image-upload v-model="form.otherProof"/></div>
       </div>
     </el-form>
  </div>
 </template>
 
 <script setup>
 import { computed } from 'vue';
 
 const props = defineProps({
   form: {
     type: Object,
     default: () => ({})
   },
   farmerTypeDict: {
     type: Array,
     default: () => []
   },
   mainProductsDict: {
     type: Array,
     default: () => []
   }
 })
 
 // 农户类型转换
 const displayFarmerType = computed(() => {
   if (!props.form.farmerType) return '未选择'
   
   const found = props.farmerTypeDict.find(item => item.value === props.form.farmerType)
   return found ? found.label : props.form.farmerType
 })
 
 // 主要农产品转换
 const displayMainProducts = computed(() => {
   if (!props.form.mainProducts || props.form.mainProducts.length === 0) return ['未选择']
   
   return props.form.mainProducts.map(productValue => {
     const found = props.mainProductsDict.find(item => item.value === productValue)
     return found ? found.label : productValue
   })
 })
 </script>
 
 <style scoped>
   .upload-review {
     display: flex;
     flex-wrap: wrap;
     gap: 20px;
     margin-top: 15px;
   }
   
   .upload-review > div {
     min-width: 200px;
   }
 </style>